<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/layuimini/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }
    </style>

    <script src="../../static/layui-master/dist/layui.js" charset="utf-8"></script>
    <script src="../../static/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script>
    <script src="../../static/js/jquery.min.js" charset="UTF-8"></script>

    <script type="text/javascript">
        var id, position, name, phone, birthday, email, province, city, district, address;
        $(function () {
            $.ajax({
                url: "/getPersonalInfo",
                datatype: "json",
                type: "get",
                async: false,
                success: function (data) {
                    id = data.id;
                    position = data.position;
                    name = data.name;
                    phone = data.phone;
                    birthday = data.birthday;
                    email = data.email;
                    province = data.province;
                    city = data.city;
                    district = data.district;
                    address = data.address;

                    console.log(data);
                }
            });
        })
    </script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form" lay-filter="first">
            <div class="layui-form-item">
                <label class="layui-form-label required">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="required" lay-reqtext="编号不能为空" placeholder="请输入编号"
                           value="" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">职称</label>
                <div class="layui-input-block">
                    <!--                    <input type="text" name="position" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"  value="" class="layui-input">-->
                    <select name="position" lay-verify="required" lay-verType="tips" lay-filter="position">
                        <option value="">请选择职称</option>
                        <option value="助教">助教</option>
                        <option value="初级讲师">初级讲师</option>
                        <option value="中级讲师">中级讲师</option>
                        <option value="高级讲师">高级讲师</option>
                        <option value="副教授 ">副教授</option>
                        <option value="教授">教授</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">手机</label>
                <div class="layui-input-block">
                    <input type="tel" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机"
                           value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" class="layui-input" id="birthday" placeholder="请选择出生日期">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" name="email" placeholder="请输入邮箱" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block" id="area-picker">
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="province" class="province-selector" data-value="" lay-filter="province-1"
                                id="province">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="city" class="city-selector" data-value="" lay-filter="city-1" id="city">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="county" class="county-selector" data-value="" lay-filter="county-1" id="county">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" name="address" placeholder="请输入详细地址" value="" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'miniTab'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab
        $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            console.log(data.field.id);
            console.log(data);
            $.ajax({
                url: "/updatePersonalInfo",
                type: "post",
                data: {
                    id: data.field.id
                    , position: data.field.position
                    , name: data.field.name
                    , phone: data.field.phone
                    , birthday: data.field.birthday
                    , email: data.field.email
                    , province: data.field.province
                    , city: data.field.city
                    , district: data.field.county
                    , address: data.field.address
                },
                datatype: "text",
                success: function (data) {
                    if (data == "success") {
                        layer.msg('个人信息修改成功，下次登入生效！', {
                            icon: 1,
                            time: 1000, //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            parent.layer.closeAll('iframe');
                        });
                    } else {
                        layer.msg('个人信息修改失败，请稍后再试！', {
                            icon: 0,
                            time: 1000, //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            parent.layer.closeAll('iframe');
                        });
                    }
                }
            });

        });

    });
</script>
<!--配置日期组件-->
<script>
    layui.use('laydate', function (laydate) {

        //全局配置
        laydate.set({
            //trigger: 'focus'
        })


        //格子主题
        laydate.render({
            elem: '#birthday' //指定元素
            //,type: 'datetime'
            , theme: 'grid'
            //,range: true
            , trigger: 'click'
        });

    });
</script>
<!--职称下拉框-->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;


        //初始赋值
        var thisValue = form.val('first', {
            'id': id
            , 'name': name
            , 'position': position
            , 'phone': phone
            , 'email': email
            , 'birthday': birthday
            , 'address': address
        });


        //事件监听
        form.on('select(position)', function (data) {
            // console.log('select: ', this, data);
            console.log(data.value);
        });
    });
</script>
<script>
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            data: {
                province: province,
                city: city,
                county: district,
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
    });
</script>
</body>
</html>